u-fit/frontend/pages/admin/training/[id].tsx

import { useRouter } from 'next/router'
import EditTraining from '../../../src/training/components/EditTraining'
import { useTrainingQuery } from '../../../src/gql'

const EditTrainingPage = () => {
  const router = useRouter()
  const { id } = router.query
  const training = useTrainingQuery({
    variables: { id: typeof id === 'string' ? id : id[0] }
  })

  if (training.loading) return <p>Loading data...</p>
  if (training.error) return <p>Error loading data.</p>
  console.log(training.data?.training)
  if (training.data?.training)
    return <EditTraining training={training.data.training} />
  else return <p>Training {id} not found.</p>
}

export default EditTrainingPage